<template>
  <div class="alarm">
    <div class="alarm-top">
      <span v-text="interName" />
      <Icon class="close-fill"
            @click="closeAlarm"
            icon="close-fill" />
    </div>

    <div class="alarm-list">
      <ul>
        <li class="alarm-item"
            v-for="item in list"
            :key="item.id">
          <div class="item-pic">
            <img :src="item.images[0]" @click="touchImg(item)" />
          </div>
          <div class="item-content">
            <span class="inter-name"
                  v-text="item.interName"></span>
            <div class="item-label">
              <label>设备类型：</label>
              <span class="device-name"
                    v-text="item.deviceTypeName"></span>
            </div>
            <div class="item-label">
              <label>故障原因：</label>
              <span class="device-name"
                    v-text="item.alarmContent"></span>
            </div>
            <span class="item-time"
                  v-text="item.time"></span>
            <div class="item-label">
              <label>当前进度：</label>
              <span class="device-name"
                    v-text="item.progress"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import Icon from '/@/components/Icon/Icon.vue'
import { defineComponent, toRefs } from 'vue'
import { state } from './state'
import { ImagePreview } from 'vant';
import { ImagePreviewOptions } from 'node_modules/vant/types/image-preview';

export default defineComponent({
  components: {
    Icon,
  },
  props: {
    interName: {
      type: String,
      default: '',
    },
  },
  emits: ['closeAlarm'],
  setup(_props, { emit }) {
    /**
     * @Description 关闭事件
     * @date 2021-03-10
     * @returns {any}
     */
    const closeAlarm = () => {
      emit('closeAlarm')
    }

    const onChange = (index: any) => {
      console.log(index, '点击当前图片发消息置原生，图片全屏展示')
    }

    const touchImg = (item: { images: ImagePreviewOptions; }) => {
        ImagePreview(item.images)
    }

    return {
      ...toRefs(state),
      closeAlarm,
      onChange,
      touchImg,
    }
  },
})
</script>


<style lang="less" scoped>
@import './alarm.less';
</style>